<template>
	<view class="statistics">
		<!-- 使用v-for遍历数组 -->
		<view class="statistics-item" v-for="(item, index) in items" :key="index">
			<text class="item-number">{{ item.number }}</text>
			<text class="item-name">{{ item.name }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";

	// 定义props
	const props = defineProps({
		// 更改为数组类型
		item: {
			type: Array,
			default: () => [],
			required: true
		}
	});

	// 使用计算属性将数组转化为每个item都有number和name的对象数组
	const items = computed(() => {
		return props.item.map(item => ({
			name: item.name || '',
			number: item.number || ''
		}));
	});
</script>

<style lang="scss" scoped>
	.statistics {
		width: 750rpx;
		height: 212rpx;
		padding: 82rpx 25rpx 30rpx 25rpx;
		background-color: $main-background-color;
		display: flex;
		justify-content: left;
		align-items: center;
		gap: 100rpx;

		.statistics-item {
			width: 100rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.item-number {
				font-family: Alibaba PuHuiTi 2.0 regular;
				font-weight: 300;
				font-size: 30rpx;
				color: $font-primary-color;
			}

			.item-name {
				font-family: Alibaba PuHuiTi 2.0 light;
				font-weight: 300;
				font-size: 24rpx;
				color: $font-9e-color;
			}
		}
	}
</style>